<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>猜数字</title>
	<style>
		label{height: 50px;line-height: 50px;}
		.my,.computer{height: 80px;line-height: 80px;border: 0;text-align: center;outline: 0;}
		.start{height: 30px;width: 100px;line-height: 30px;background-color: #366;color: snow;border: 0;font-size: 20px;outline: 0;margin-right: 50px;}
		.result{width: 100px;height: 50px;line-height: 50px;border: 0;}
	</style>
</head>
<body>
	<label>请输入数字：<input type="text" class="my" id="my"></label>
	<label>电脑：<input type="password" class="computer" id="computer"></label>
	<input type="button" value='reset' class="start" id="reset">
	
	<div>
		<input type="button" id="start" class="start" value="开始判断">
		<input type="text" id="result" class="result">
		
	</div>
	<script>
		var c = document.getElementById('computer');
		var m = document.getElementById('my');
		var set = document.getElementById('reset');
		var start = document.getElementById('start');
		var res = document.getElementById('result');
		var randomN = Math.floor(Math.random() * 10);
		c.value = randomN;

		/*重置电脑给出的数字*/
		set.onclick = function(){
			randomN = Math.floor(Math.random() * 10);
			c.value = randomN;
			res.value = '';
		}

		/*开始比较俩个数字*/
		start.onclick = function (){
				m.value < c.value && (res.value = '太小了！');
				m.value > c.value && (res.value = '太大了！');
				m.value == c.value && (res.value = '刚刚好 真厉害！！');
		}
	</script>
</body>
</html>